<template>
  <transition name="el-fade-in-linear">
    <div id="homePage">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div v-if="images.length>0">
          <van-swipe :height="(slide_h*0.28)"  :width="slide_w"  :autoplay="3500">
            <van-swipe-item v-for="(x, index) in images" :key="index">
              <!--<img style="height:100%" class="w-percent100"  :src="proAPI.RESOURCE_URL+x.imagePath" />-->
              <div  class="w-percent100 bg-img-cover" style="height:100%" :style="{backgroundImage: 'url(' + proAPI.RESOURCE_URL+x.imagePath+' )'}" ></div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div v-else :style="{height:slide_h*0.28+'px'}">
          <!--<div  class="w-percent100 bg-img-cover" style="height:100%" :style="{backgroundImage: 'url(' + img1+' )'}" ></div>-->
        </div>
        <div v-if="notices!=null">
          <van-notice-bar
            left-icon="volume-o"
            mode="link"
            @click="openInfo(notices.id)"
          >
            {{notices.descript}}
          </van-notice-bar>
        </div>
      </van-pull-refresh>
    </div>
  </transition>
</template>
<script type="es6" scoped>
  export default {
    data() {
      return {
        slide_w:window.document.body.offsetWidth,
        slide_h:window.document.body.offsetHeight,
        isLoading: false,
        loadingTxt:'',
        notices:null,
        images:[]
      }
    },
    methods: {
      init() {
      },
      onRefresh() {
      }
    },
    mounted: function() {
    },
  }
</script>
<style scoped lang="scss">
  $imgwith:80px;
  $imgheight:80px;
  #homePage{
    .gameImage{
      width:$imgwith;
      height: $imgheight;
    }
  }
</style>
